<%@ page language="java"  contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/tags.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <title>本软件详情</title>
<script type="text/javascript">
	
	var regions = eval(${regions});

	$(function () {
		
		$('.connum_btn').click(function() {
			getOnlineNum();
		});
		
		$('.dev_region_btn').click(function() {
			devRegion();
		});
	});
	
	function branchChange(ele) {
		ele = $(ele).closest('.select_wrap');
		$(ele).children('.sec_select').empty();
		$(ele).children('.three_select').empty();
		var fi = $(ele).children('.fir_select').prop('selectedIndex');
		changeSelect(regions[fi].roads,
				$(ele).children('.sec_select'));
		changeSelect(regions[fi].roads[0].stations,
                $(ele).children('.three_select'));
	}
	
	function roadChange(ele) {
		ele = $(ele).closest('.select_wrap');
		$(ele).children('.station').empty();
		var fi = $(ele).children('.fir_select').prop('selectedIndex');
		var si = $(ele).children('.sec_select').prop('selectedIndex');
		changeSelect(regions[fi].roads[si].stations,
                $(ele).children('.three_select'));
	}
	
	function initSelect(obj) {
        $.each($('.select_wrap'), function(n, sw) {
            sw = $(sw);
            var ele = sw.children('.fir_select');
            var ele2 = sw.children('.sec_select');
            var ele3 = sw.children('.three_select');
            var bid = sw.attr('data-branch-id');
            var rid = sw.attr('data-road-id');
            var sid = sw.attr('data-station-id');
            $.each(obj, function(n, s) {
                ele.append('<option value="'+s.id+'">'+s.name+'</option>');
                if (s.id == bid) {
                    var roads = obj[n].roads;
                    $.each(roads, function(n, s) {
                        ele2.append('<option value="'+s.id+'">'+s.name+'</option>');
                        if (s.id == rid) {
                            var stations = roads[n].stations;
                            $.each(stations, function(n, s) {
                                ele3.append('<option value="'+s.id+'">'+s.name+'</option>');
                            });
                            ele3.val(sid);
                        }
                    });
                    ele2.val(rid);
                }
            });
            ele.val(bid);            
        });		
	}
	
	function changeSelect(obj, ele) {
		if (obj == null || obj.length == 0) {
			return;
		}
		$.each(obj, function(n, s) {
            ele.append('<option value="'+s.id+'">'+s.name+'</option>');
		});
	}
	
	
	function devRegion() {
		$.post(ctx + "/detail/devRegion.htm", function(data) {
			setDialog(data);
			initSelect(regions);
        });
	}


	function getOnlineNum() {
		$.post(ctx + "/getOnlineNum.json", function(json) {			
			if(json.result) {
				$('#conn_num').val(json.data);
			} else {
				alert(json.message);
			}
		}, "json");
	}
	
	function save() {
		var flag = true;
		$.each($('.select_wrap'), function(n, ele) {
			ele = $(ele);
			var fv = ele.children('.fir_select').val();
			var sv = ele.children('.sec_select').val();
			var tv = ele.children('.three_select').val();
			var v = '--请选择--';
			var nu = 'undefined';
            if (fv == null || fv == v || sv == null || sv == v || tv == null 
            		|| tv == v || fv == nu || sv == nu || tv == nu) {
            	flag = false;
            	alert('参数不能为空');
            	return;
            }
        });
		if (!flag) return;
		var jsonObj = $('#devRegionForm').serializeArray();
		var jsonStr = '[';
		for (var i = 0; i < jsonObj.length;) {
			jsonStr += '{';
		    jsonStr += '"' + jsonObj[i].name + '":' + jsonObj[i++].value + ',';
		    jsonStr += '"' + jsonObj[i].name + '":' + jsonObj[i++].value + ',';
		    jsonStr += '"' + jsonObj[i].name + '":' + jsonObj[i++].value + ',';
		    jsonStr += '"' + jsonObj[i].name + '":' + jsonObj[i++].value;
			jsonStr += '},';
		}
		jsonStr += ']';
 		$.post(ctx + "/detail/save.json", {dstr:jsonStr}, function(json) {           
            if(json.result) {
            	closeDialog();
            	alert("更新成功");
            } else {
                alert("更新失败。设备ID和收费站组合不能重复。");
            }
        }, "json");
	}
	

	
</script>
    <style type="text/css">
        
   		.label_width {
   			width: 140px;
   		}
   		
   		.detail_content {
   		   margin-left: 20px;
   		}
   		
   		.detail_content p {
	        height: 30px;
	        line-height: 30px;
	        margin-top: 30px;
	        margin-bottom: 10px;
        }
        
        .dev_region_btn {
            margin-top: 30px;
            margin-left: 20px;
        }
   		
   		#conn_num {
   			width: 80px;
   			margin-right: 20px;
   			display: inline-block;
   		}
	</style>
</head>
<body>
    <div class="detail_content">
	    <p>
	        <label class="label_width" >心跳判断间隔（秒）:</label>
	        <input class="input_s_width" id="keepAlive" name="keepAlive" type="text" value="${keep_alive }"/>
	        <a class="a_small_button set_ka_btn">设置</a>
	    </p>
	    <p>
	        <label class="label_width" >TCP连接数：</label>
	        <span id="conn_num">${connNum }</span>
	        <a class="a_small_button connum_btn">查询</a>
	    </p>
	    <p>
	        <a class="a_button dev_region_btn">设备名与区域</a>
	    </p>
	</div>
</body>
</html>